<template>
    <div id="invoiceCell">

        <div class="leftDiv">

            <img
                    :src="checkboxDefault"
                    @click="clickCheckbox"
                    v-show="!item.isCheck"
                    class="chceckImg"
            />
            <img
                    :src="checkboxSelect"
                    @click="clickCheckbox"
                    v-show="item.isCheck"
                    class="chceckImg"
            />

        </div>
        <div class="rightDiv" @click="clickCheckbox">
            <div class="center">

                <div class="centerDiv1">
                    <div class="centerDiv1">
                        <van-icon
                                :name="date"
                                class="icon"
                        />
                        <label class="dateMessage">{{item.createAt}}</label>
                    </div>
                    <div class="payType"> </div>
                </div>
                <div class="centerDiv2">
                    <van-icon
                            :name="didian"
                            class="icon"
                    />
                    <label class="message">{{item.repairArea}}</label>
                </div>

                <div class="centerDiv3">
                    <div class="centerDiv3">
                        <van-icon
                                :name="weixiu"
                                class="icon"
                        />
                        <label class="message">{{item.repairTypeName}}</label>
                    </div>
                    <div class="totalSum">合计:¥{{item.orderPrice}}</div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "InvoiceCell",
        data(){
            return{
                weixiu:require("@/images/icon/order/weixiu_gray.png"),
                date:require('@/images/icon/order/date_invoice.png'),
                didian:require("@/images/icon/order/didian_gray.png"),
                checkboxSelect: require("@/images/icon/checkbox_select.png"),
                checkboxDefault: require("@/images/icon/checkbox_default.png"),
                isCheckImg:false

            }
        },
        methods:{
            clickCheckbox(){
                console.log('选择');

                if (this.item.isCheck) {
                    this.cellCancelClick();
                    this.item.isCheck = false;
                }else {
                    this.item.isCheck = true;
                }

            },
            cancel(){
                // this.cellCancelClick();
                // this.item.isCheck = false;

            }

        },computed:{

        },
        props:{
            item:Object,
            cellCancelClick:Function
        }
    };
</script>

<style scoped>
    #invoiceCell {
        margin-top: 1.3333333333333333rem;
        margin-left: 1.3333333333333333rem;
        margin-right: 1.3333333333333333rem;

        border-radius: 0.26666666666666666rem;
        background-color: white;
        display: flex;
    }

.leftDiv{
    width: 3.3666666666666667rem;
    /*height:6.466666666666667rem;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.rightDiv{
    width: 100%;
    padding-right: 1rem;
}
    .center {
        /*position: relative;*/
        /*display: flex;*/
        /*flex-direction: row;*/
        width: 100%;
        /*height:6.466666666666667rem;*/
        padding-top: 1rem;
        padding-bottom: 1.2rem;
    }
    .centerDiv1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        height:1.3333333333333333rem;
        font-size:0.9333333333333333rem;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        color:rgba(18,28,50,1);
        line-height:1.3333333333333333rem;

    }

    .centerDiv2 {
        margin-top: 0.3333333333333333rem;
        display: flex;
        align-items: center;

        font-size:0.8333333333333334rem;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        color:rgba(122,132,145,1);
        line-height:1.2rem;
    }
    .centerDiv3 {
        margin-top: 0.06666666666666667rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        height:1.2rem;
        font-size:0.8333333333333334rem;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        color:rgba(122,132,145,1);
        line-height:1.2rem;
    }

    .icon {
        width: 0.8666666666666667rem;
        height: 0.8666666666666667rem;
    }
.dateMessage{
    height:1.3333333333333333rem;
    font-size:0.9333333333333333rem;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(18,28,50,1);
    line-height:1.3333333333333333rem;

    margin-left: 0.43333333333333335rem;


}
    .message {

        font-size:0.8333333333333334rem;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        color:rgba(122,132,145,1);
        line-height:1.2rem;

        margin-left: 0.43333333333333335rem;
    }
.payType{
    height:1.2333333333333334rem;
    font-size:0.8666666666666667rem;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(122,132,145,1);
    line-height:1.2333333333333334rem;
}
    .totalSum {

        height:1.3333333333333333rem;
        font-size:0.9333333333333333rem;
        font-family:PingFangSC-Medium,PingFangSC;
        font-weight:500;
        color:rgba(18,28,50,1);
        line-height:1.3333333333333333rem;
    }
.chceckImg{
    width: 1rem;
    height: 1rem;
}

</style>
